
<template>
	<view class="info">
		<view class="bar_top">
			<view class="user_list">
				<view class="user_item">
					<!-- <image mode="aspectFill" :src="info0.avatar" @tap="lookImg(info0.avatar)"></image> -->
					<view>{{info0.name}}</view>
				</view>
			</view>

			<view class="bar_list">
				<view :class="barNum == 0 ? 'bar_item active' : 'bar_item'" @tap="getData(1,0)">
					<text>资料</text>
				</view>
				<view :class="barNum == 1 ? 'bar_item active' : 'bar_item'" @tap="getData(1,1)">
					<text>设备</text>
				</view>
				<view :class="barNum == 5 ? 'bar_item active' : 'bar_item'" @tap="getData(1,5)">
					<text>订单</text>
				</view>
				<view :class="barNum == 2 ? 'bar_item active' : 'bar_item'" @tap="getData(1,2)">
					<text>派工</text>
				</view>
				<view :class="barNum == 3 ? 'bar_item active' : 'bar_item'" @tap="getData(1,3)">
					<text>拜访</text>
				</view>
				<view :class="barNum == 4 ? 'bar_item active' : 'bar_item'" @tap="getData(1,4)">
					<text>联系人</text>
				</view>
			</view>

			<block v-if="barNum == 1 || barNum == 2">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" placeholder="请输入关键词" v-model="search" />
						<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
					</view>
					<view class="search_btn" @tap="searchBtn()">搜索</view>
				</view>

				<view class="finance_bar">
					<view>查询时间：</view>
					<picker mode="date" fields="day" @change="getStart">
						<view class="finance_bar_picker">
							<view>{{start == "" ? "请选择开始时间" : start}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="date" fields="day" @change="getEnd">
						<view class="finance_bar_picker">
							<view>{{end}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
				</view>
			</block>

			<view class="visit_time" v-if="barNum == 3"><image src="/static/images/time.png"></image>下次预约回访时间：{{visitTime}}</view>
		</view>

		<view class="info_content" v-show="!boxHide" :style="'padding-top:'+paddingTop+'rpx'">
			<view class="info_content1" v-if="barNum == 0">
				<view class="font_item">
					<view>商户名称</view>
					<view>{{info0.title}}</view>
				</view>
				<view class="font_item">
					<view>区域</view>
					<view>{{info0.country}}</view>
				</view>
				<view class="font_item">
					<view>联系人</view>
					<view>{{info0.name}}</view>
				</view>
				<view class="font_item">
					<view>电话</view>
					<view>{{info0.mobile}}</view>
				</view>
				<view class="font_item">
					<view>地址</view>
					<view>{{info0.province}}{{info0.city}}{{info0.area}}{{info0.address}}</view>
				</view>
				<view class="font_item">
					<view>详细地址</view>
					<view>{{info0.detailed_address}}</view>
				</view>
				<view class="font_border"></view>
				<view class="font_item">
					<view>类型</view>
					<view>{{info0.type}}</view>
				</view>
				<view class="font_item">
					<view>标签</view>
					<block v-for="(item,index) in info0.labels">
						<text class="font_item_laber" :key="index">{{item}}</text>
					</block>
				</view>
				<view class="font_item">
					<view>跟踪状态</view>
					<view>{{info0.tracking_state?info0.tracking_state:'暂无'}}</view>
				</view>
				<view class="font_border"></view>
				<view class="font_item">
					<view>售后负责人</view>
					<view>{{info0.sale_user}}</view>
				</view>
				<view class="font_item">
					<view>业务联系人</view>
					<view>{{info0.contact_user}}</view>
				</view>
				<view class="font_item">
					<view>营业面积</view>
					<view>{{info0.biz_area}}</view>
				</view>
				<view class="font_item">
					<view>备注</view>
					<view>{{info0.desc}}</view>
				</view>
			</view>

			<block v-for="(item,index) in info1.list" v-if="barNum == 1">
				<view class="info_equipment" :key='index'>
					<view class="info_equipment_title" @tap="equipmentDetail(item.id)">
						<text>{{item.title}}</text>
						<image :src="item.status ? '/static/images/down.png' : '/static/images/right.png'" mode="aspectFit" class="more"></image>
					</view>
				</view>
			</block> 

			<block v-for="(item,index) in info2.list" v-if="barNum == 2">
				<view class="work_item" @click.stop="workDetail(item)">
					<view class="work_item_name" :key="index">
						<view class="left">
							<view>{{item.customer_title}}</view>
							<view>{{item.type}}</view>
						</view>
						<view :class="item.status ? 'work_userInfo_laber color_green' : 'work_userInfo_laber color_blue'">{{item.status}}</view>
					</view>
					<view class="work_item_id">维修员：{{item.exec_user}}</view>
					<view class="work_item_text">
						<text>时间：{{item.create_at}}</text><text>电话：{{item.customer_mobile}}</text>
					</view>
					<view class="work_item_text">
						<text>位置：{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
					</view>
				</view> 
			</block>

			<block  v-if="barNum == 5">
				  <Order :customerId="merchantId"></Order>
			</block>

			<!-- <view class="box_title" v-if="barNum == 3">拜访进度</view> -->
			<view class="visit_list" v-if="barNum == 3">
				<block v-for="(item,index) in info3.list">
					<view class="visit_item" :key="index">
						<!-- <image class="visit_item_status" :src="'/static/images/laber_icon' + (Number(item.status) + 1)  + '.png'" @tap="visitDeal(0,item)"></image> -->
						<image class="visit_item_status" :src="'/static/images/laber_icon' + (Number(item.status) + 1)  + '.png'" @tap="visitSign(item.id,item.status,item.appointment_date)"></image>
						<view class="visit_item_content_box" @click.stop="go('visitDetail',item.id)">
							<image class="visit_item_content_bg"></image>
							<view class="visit_item_content">
								<view class="visit_item_content_title">
									<view>{{item.title}}</view>
									<view>{{item.type}}</view>
									<view v-if="item.status!=1" @click.stop="visitSign(item.id,item.status,item.appointment_date)" >签到</view>
									<!-- <image src="/static/images/prompt.png" mode=""  ></image> -->
								</view>
								<view class="visit_item_content_text">
									<view class="">{{item.content}}</view>
								</view>
								<view class="visit_item_content_time">
									<view v-if="item.status==1 && item.sign_time > item.appointment_date" style="color:red">{{item.appointment_date}}  签到超时</view>
									<view v-else>{{item.appointment_date}}</view>
									<view class="visit_item_content_time_icon">
										<image src="/static/images/visit_icon1.png" @click.stop="visitDeal(1,item)" v-if="item.status == 0&&checkPermission([10008])"></image>
										<image src="/static/images/visit_icon2.png" @click.stop="visitDeal(2,item)"></image>
										<!-- <image src="/static/images/visit_icon3.png" @tap="visitDeal(3,item)"></image> -->
										<image src="/static/images/visit_icon4.png" @click.stop="visitDeal(4,item,index)" v-if="checkPermission([10003])"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<block v-for="(item,index) in info4.list" v-if="barNum == 4">
				<view class="phone_item" :key="index" @longpress="delContact(item.id)">
					<view class="phone_item_name">
						<view>{{item.name}}</view>
						<view>{{item.mobile}}</view>
					</view>
					<image src="/static/images/phone.png" @tap="makePhone(item.mobile)"></image>
				</view>
			</block>
		</view>

		<view class="bottom_btn" v-if="barNum == 0">
			<view class="bottom_btn_list" v-if="checkPermission([10002])">
				<view @tap="open('addBoxStaus')">更多</view>
				<!-- <view @tap='navGo("/pages/order/add/add?customerId=" + info0.id)'>添加订单</view> -->
				<!-- <view @tap='go("add",info0.id)'>修改资料</view> -->
			</view>
		</view>

		<view class="bottom_btn" v-if="barNum == 1">
			<view class="bottom_btn_list">
				<view @tap="equipmentAdd()" v-if="checkPermission([10005])">设备录入</view>
			</view>
		</view>

		<!-- <view class="bottom_btn" v-if="barNum == 2">
			<view class="bottom_btn_list">
				<view @tap="workAdd()">派工创建</view>
			</view>
		</view> -->

		<view class="bottom_btn" v-if="barNum == 3">
			<view class="bottom_btn_list">
				<!-- <view>批量添加拜访</view> -->
				<view @click.stop="visitDeal(5,{status:1})" v-if="checkPermission([10007])">添加拜访</view>
			</view>
		</view>

		<view class="bottom_btn" v-if="barNum == 4">
			<view class="bottom_btn_list">
				<view @tap="addPhone(0)" v-if="checkPermission([10009])">添加同事</view>
			</view>
		</view> 

		<view class="window index999" v-if="addBoxStaus">
			<view class="bottom_popup">
				<!-- <view>添加派工</view> -->
				<view @tap="go('transferClient')">转交客户</view>
				<view @tap="go('visitAdd')">添加签到</view>
				<view @tap="open('addBoxStaus')">取消</view>
			</view>
		</view>

		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barNum: 0,
 				addBoxStaus: false,
				merchantId: "", // 客户id
				visitHeight: 0,
				page: 0,
				loading: true,
				info0: {},
				info1: {
					list: [],
					page: 1,
					loading: true
				},
				info2: {
					list: [],
					page: 1,
					loading: true
				},
				info3: {
					list: [],
					page: 1,
					loading: true
				},
				info4: {
					list: [],
					page: 1,
					loading: true
				},
				info5:{
					list:[],
					page:1,
					loading:true
				},
				boxHide: true,
				visitLaber: ["", "初次咨询", "上门拜访"],
				identity: "",
				visitTime:"",
				customerAddress:"", // 客户地址
				end: "",
				start: "",
				showEmptyBtn:false,
				search: "",	
				paddingTop: 210 // 上边距
			}
		},
		onLoad(options) {
			let that = this;
			this.merchantId = options.kid;
			this.end = this.$api.getNowTime();

			// this.identity = this.userInfo.identity
			// uni.getSystemInfo({
			// 	success(res) {
			// 		that.visitHeight = res.windowHeight - (res.windowWidth / 750 * 430)
			// 	}
			// });
		},
		onShow() {
			this.getData(1, this.barNum)
		},
		onHide() {
			this.boxHide = this.$hideBox;
		},
		onUnload() {
			this.$app.globalData.upData.clientInfo[0] = true;
			this.$app.globalData.upData.clientInfo[1] = true;
			this.$app.globalData.upData.clientInfo[2] = true;
			this.$app.globalData.upData.clientInfo[3] = true;
			this.$app.globalData.upData.clientInfo[4] = true;
			this.$app.globalData.upData.clientInfo[5] = true;
		},
		// onReachBottom() {
		// 	if (this.loading) {
		// 		this.getData(3, this.barNum);
		// 	}
		// },
		methods: {
			emptyValue(){
				this.search='';
				this.getData(1,this.barNum);
			},
			searchBtn() { //搜索
				this.getData(1,this.barNum);
			},
			getStart(e) {
				this.start = e.detail.value;
				this.getData(1,this.barNum);
			},
			getEnd(e) {
				this.end = e.detail.value;
				if (this.start.length > 0) {
					this.getData(1,this.barNum);
				}
			},
			//打开工单详情
			workDetail(item){
				uni.navigateTo({
					url: `/pages/work/info/info?workOrderId=${item.id}`
				})
			},
			go(obj, kid) { //页面跳转
				if (obj == 'transferClient') {
					// 封装业务联系人
					let contact = {'name':this.info0.contact_user,'id':this.info0.contact_user_id};
					let sale = {'name':this.info0.sale_user,'id':this.info0.sale_user_id};
					let customerId = this.info0.id;
					uni.navigateTo({
						url: '/pages/client/info/transferClient/transferClient?contact='+JSON.stringify(contact)+'&sale='+JSON.stringify(sale)+'&customerId='+customerId
					})
					return false;
				}
				if(obj == 'visitAdd') {
					uni.navigateTo({
						url: `/pages/client/info/visitAdd/visitAdd?type=${5}&merchantId=${this.merchantId}`
					})
					this.addBoxStaus = false;
					this.getData(1,3);
					return false;
				}
				if(obj == 'visitDetail'){ 
					uni.navigateTo({
						url: `/pages/client/info/visitDetail/visitDetail?id=${kid}`
					})
					return false;
				}
				if (this.addBoxStaus) this.addBoxStaus = !this.addBoxStaus
				uni.navigateTo({
					url: "/pages/client/" + obj + "/" + obj + "?kid=" + kid
				})
				
				
			},
			navGo(url){
				uni.navigateTo({url})
			},
			open(obj) { //打开弹窗
				this[obj] = !this[obj]
			},
			lookImg(src) {
				uni.previewImage({
					urls: [src]
				})
			},
			openEquipmentList(index) { //打开设备分类
				this.info1.list[index].status = !this.info1.list[index].status
			},
			equipmentDetail(deviceId) { //查看设备详情
				uni.navigateTo({
					url: "/pages/client/info/equipmentDetail/equipmentDetail?deviceId=" + deviceId
				})
			},
			equipmentAdd() { //录入设备
				uni.navigateTo({
					url: "/pages/client/info/equipmentAdd/equipmentAdd?merchantId=" + this.merchantId
				})
			},
			workAdd() { //派工创建
				this.$api.prompt("开发中~");
				return;
				uni.navigateTo({
					url: "/pages/client/info/workAdd/workAdd?merchantId=" + this.merchantId
				})
			},
			visitDeal(index, item, num) { //拜访操作
				if (index == 3) {
					this.$api.prompt("开发中~");
					return;
					uni.navigateTo({
						url: "/pages/client/info/visitSend/visitSend?merchantId=" + this.merchantId
					})
				} else if (index == 4) {
					let that = this;
					uni.showModal({
						title: "温馨提示",
						content: "是否删除该拜访记录",
						success(res) {
							if (res.confirm) {
								that.$api.addClientVisit({
									id: item.id
								}, index).then(res => {
									
									that.info3.list.splice(num, 1);
									that.$api.prompt("删除成功")
								})
							}
						}
					})
				} else {
					if (item.status == 2 && index == 0) return;
					console.log(item)
					uni.navigateTo({
						url: "/pages/client/info/visitAdd/visitAdd?type=" + index + "&merchantId=" + this.merchantId + "&visitId=" + item.id
					})
				}
			},
			makePhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			addPhone() { //添加同事 
				uni.navigateTo({
					url: "/pages/client/info/phoneAdd/phoneAdd?kid=" + this.merchantId
				})
			},
			getData(type, index) {

				// 设置上边距 
				if(index ==1 || index ==2){
					this.paddingTop = 380;
				}else{
					this.paddingTop = 210;
				}

				if(index == 5){// 订单不用查询
					this.barNum = index;
					this.boxHide = false;
				}else{
					this.$refs.load.initLoading({loadType: type,loadPrompt: index == 0 ? false : true}).then(res => {
						this.barNum = index;
						this.boxHide = false;
						if (type == 1) {
							this['info' + index].list = [];
							this['info' + index].page = 1;
							this['info' + index].loading = true;
							this.$app.globalData.upData.clientInfo[this.barNum] = false;
						}
						// 默认参数格式
						let upJson = {customer_id:this.merchantId,page : this['info' + index].page,user_id: uni.getStorageSync("userId")}
						
						// 客户资源选项
						if(this.barNum === 0) { 
							upJson = {id: this.merchantId,user_id: uni.getStorageSync("userId")}
							// 客户订单
						}

						// 搜索关键字
						if(this.search && this.barNum != 0){
							upJson.search = this.search;
						}
						// 时间查询
						if (this.start.length > 0  && this.barNum != 0) {
							upJson.start = this.start;
							upJson.end = this.end
						}
						
						// 请求数据，详细看api.js文档
						this.$api.getClientDetails(upJson, this.barNum).then(res => {
							if (this.barNum == 0) { // 资料
								this.info0 = res;
								this.customerAddress = this.info0.province+this.info0.city+this.info0.address;
							} 
							if(this.barNum == 2){ // 派工
								// this.info2.list = res.data;
								// console.log(111, this.info2.list)
							}
							if(this.barNum == 3){ // 拜访
								var getNumWithZero = num => {
									return num < 10 ? ('0' + num) : num;
								}
								
								let DATE = new Date();
								let year = DATE.getFullYear();
								let month = getNumWithZero(DATE.getMonth() + 1);
								let date = getNumWithZero(DATE.getDate());
								
								let hour = getNumWithZero(DATE.getHours());
								let minutes = getNumWithZero(DATE.getMinutes());
								let second = getNumWithZero(DATE.getSeconds());
								
								let currentTime = new Date(`${year}/${month}/${date} ${hour}:${minutes}:${second}`).getTime();
								let lastTime = new Date(res.last_time.replace(/-/g, '/')).getTime();
								// if(currentTime > lastTime) {
								// 	this.visitTime = '暂无'
								// } else {
								// 	this.visitTime = res.last_time
								// }
								if(res.data.length>0){
									this.visitTime = res.data[0].appointment_date
								}else{
									this.visitTime = '暂无'
								}

							}
							let list = this.barNum == 1 ? res.data : this.barNum == 2 ? res.data : this.barNum == 3 ? res.data : this.barNum == 4 ? res.data : res.data;
							if (this.barNum == 1) {
								for (let i in list) {
									list[i].status = false
								}
							}
							this.$refs.load.getLoadingData({oldData: this['info' + index].list,newData: list}).then(res => {
								this['info' + index].list = res.list;
								this['info' + index].loading = res.loading
								this['info' + index].page++;
							});
						})
					})
				}
			},
			visitSign(id,status,appointmentDate){ // 拜访签到
				if(status==1){ // 已签到

					this.$api.prompt("已拜访签到");

				}else{
					let address = this.customerAddress;
					uni.showModal({
						title: "拜访签到",
						success (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:"/pages/client/info/visitSign/visitSign?id="+id+"&address="+address+"&appointmentDate="+appointmentDate
								})
							} else if (res.cancel) {
								//console.log('用户点击取消')
							
							}
						}
					})
				}
			},
			// 删除联系人
			delContact(id){
				let that = this;
				uni.showModal({
					title: "确认删除？",
					success (res) {
						if (res.confirm) {
							let upJson = {id:id};
							that.$api.removeContact(upJson).then(res=>{
								uni.showToast({title:"删除成功",icon:"none"});
								setTimeout(function(){
									that.getData(1,4);								
								},1000)
							})
							
						} else if (res.cancel) {
							//console.log('用户点击取消')
						}
					}
				})
			}
		}
	}
</script>

<style>
	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}

	.info {
		padding-bottom: 90upx;
	}

	.info_top {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.info_content {
		padding-top: 210upx;
		width: 100%;
	}

	.info_content1 {
		padding: 20upx 0;
		background: #FFFFFF;
	}

	.info_equipment {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #333333;
		background: #FFFFFF;
	}

	.info_equipment_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80upx;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.info_equipment_item_box_box {
		padding-top: 20upx;
	}

	.info_equipment_item_box {
		padding-bottom: 20upx;
	}

	.info_equipment_item {
		width: 100%;
		padding: 0 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30upx;
		color: #333333;
		background: #F8F8F8;
		height: 130upx;
		border-radius: 8upx;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.info_equipment_item:first-child {
		margin-top: 0;
	}

	.info_equipment_item_text view:nth-child(2) {
		font-size: 28upx;
		color: #9BA7B7;
		margin-top: 10upx;
	}

	.work_item {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		border-bottom: 2upx solid #EEEEEE;
		background: #FFFFFF;
	}

	.work_item_name {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 40upx;
		font-size: 30upx;
		color: #333333;
		justify-content: space-between;
	}
	.work_item_name .left {
		display: flex;
		align-items: center;
	}
	.work_item_name .left view:nth-child(2) {
		line-height: 28upx;
		padding: 0 12upx;
		font-size: 20upx;
		color: #049BFF;
		border: 2upx solid #049BFF;
		margin-left: 20upx;
		border-radius: 4upx;
	}

	.work_item_id {
		color: #666666;
		line-height: 60upx;
	}

	.work_item_text {
		height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #999;
	}

	.work_item_text text:nth-child(2) {
		margin-left: 20upx;
	}

	.visit_time {
		width: 100%;
		height: 75upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #049BFF;
		background: #DEEEFB;
		line-height: 75upx;
		position: absolute;
		z-index: 99;
	}

	.visit_time image {
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
	}

	.box_title {
		margin: 30upx;
	}
	
	.visit_list{margin-top: 100upx;padding: 0rpx 10rpx;}
	.visit_item {
		width: 670upx;
		height: 210upx;
		border-left: 2upx dashed #9BA7B7;
		margin-left: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.visit_item_status {
		width: 44upx;
		height: 44upx;
		margin-left: -22upx;
	}

	.visit_item_content_box {
		position: relative;
		width: 620upx;
		height: 190upx;
	}

	.visit_item_content_bg,
	.visit_item_content {
		position: absolute;
		width: 620upx;
		height: 190upx;
		background: #FFFFFF;
	}

	.visit_item_content_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #333333;
		width: 100%;
		padding: 0 30upx 0 45upx;
		margin-top: 20upx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.visit_item_content_title view:nth-child(2) {
		line-height: 36upx;
		padding: 0 12upx;
		font-size: 22upx;
		color: #049BFF;
		margin-left: 20upx;
		background: rgba(4, 155, 255, 0.1);
		border-radius: 4upx;
	}

	.visit_item_content_title view:nth-child(3){
		    line-height: 36rpx;
			padding: 0 12rpx;
			font-size: 25rpx;
			color: #080808;
			background: rgba(94, 102, 107, 0.1);
			border-radius: 4rpx;
			position: absolute;
			right: 20rpx;
	} 

	.visit_item_content_title image {
		width: 28upx;
		height: 28upx;
		margin-left: auto;
		position: absolute;
		right: 10upx;
		top: 0;
	}

	.visit_item_content_text {
		padding: 0 30upx 0 45upx;
		width: 100%;
		box-sizing: border-box;
		height: 78rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #666666;
		margin: 4rpx 0;
	}
	.visit_item_content_text view{
		height:100%;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.visit_item_content_time {
		width: 100%;
		padding: 0 30upx 0 45upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		font-size: 24upx;
		color: #9BA7B7;
	}

	.visit_item_content_time_icon {
		margin-left: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.visit_item_content_time_icon image {
		width: 26upx;
		height: 26upx;
		margin-left: 26upx;
	}

	.phone_item {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		border-bottom: 2upx solid #EEEEEE;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
	}

	.phone_item_name view:nth-child(2) {
		color: #9BA7B7;
		font-size: 28upx;
		margin-top: 10upx;
	}

	.phone_item image {
		width: 35upx;
		height: 39upx;
		margin-left: auto;
	}

	.phone_item:last-child,
	.work_item:last-child {
		border-bottom: 0upx solid #FFFFFF;
	}

	.position_bg1 {
		z-index: 999;
	}

	.active {
		border-bottom: 6upx solid #049BFF;
		color: #049BFF;
	}
</style>
